<template>
    <div style="margin-top: 50px">
        <!--采购信息标题-->
        <el-row style="margin-right: 150px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">
                <span style="font-size: 25px">采购信息查询</span>
            </div></el-col>
        </el-row>

        <!--表格-->
        <el-row style="margin-top: 25px;margin-left: 50px">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-table
                            :data="tableData"
                            width="100%"
                            highlight-current-row
                            @current-change="handleCurrentChange">
                        <el-table-column
                                property="name"
                                label="供应商名称"
                                width="280">
                        </el-table-column>
                        <el-table-column
                                property="person"
                                label="采购员"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                property="time"
                                label="采购时间"
                                width="280">
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>

        <!--分页和查询还有按钮-->
        <el-row style="margin-top: 30px;margin-right: 400px">
            <el-col :span="14"><div class="grid-content bg-purple">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pageSize"
                        @current-change="change">
                </el-pagination>
                <div style="margin-top: 100px">
                    <el-button type="success" @click="inputShow">采购详情</el-button>
                </div>
            </div></el-col>

            <el-col :span="10"><div class="grid-content bg-purple-light">
                <el-card class="box-card">
                    <span>查询采购信息</span><br>
                    <el-form ref="form" :model="form" label-width="80px" style="margin-left: 50px;margin-right: 50px;margin-top: 10px">
                        <el-form-item label="供应商">
                            <el-input v-model="supplier"></el-input>
                        </el-form-item>
                        <el-form-item label="起始日期">
                            <el-input v-model="start"></el-input>
                        </el-form-item>
                        <el-form-item label="结束日期">
                            <el-input v-model="end"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" @click="init">查询</el-button>
                </el-card>
            </div></el-col>
        </el-row>


        <!--查看客户弹框-->
        <el-dialog
                title="采购详情"
                :visible.sync="queryInfo"
                width="50%">
            <el-form ref="form" :model="form" label-width="100px" style="margin-right: 90px;margin-left: 50px">
                <el-form-item label="供应商名称:">
                    <span>{{supplierName}}</span>
                </el-form-item>
                <el-form-item label="采购员:">
                    <span>{{user}}</span>
                </el-form-item>
                <el-form-item label="采购时间:">
                    <span>{{time}}</span>
                </el-form-item>
            </el-form>
            <span style="float: left;margin-left: 60px">采购物品明细</span>
            <el-table
                    :data="orderData"
                    width="100%"
                    height="300px"
                    highlight-current-row
                    @current-change="handleCurrentChange">
                <el-table-column
                        property="name"
                        label="商品名称"
                        width="200">
                </el-table-column>
                <el-table-column
                        property="mill"
                        label="厂家"
                        width="200">
                </el-table-column>
                <el-table-column
                        property="purchase"
                        label="建议采购价"
                        width="100">
                </el-table-column>
                <el-table-column
                        property="sale"
                        label="建议销售价"
                        width="100">
                </el-table-column>
                <el-table-column
                        property="count"
                        label="采购数量"
                        width="100">
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "InputInfo",
        data(){
            return{
                //表格数据
                tableData:"",

                //动态查询参数
                supplier:"",
                start:"",
                end:"",

                //分页参数
                currentPage:1,
                pageSize: 5,
                total: 50,


                //采购详情页面
                queryInfo: false,
                infoId: "",
                supplierName:"",
                user:"",
                time:"",
                orderData:"", //采购订单详情

            }
        },
        //初始化页面
        mounted() {
            this.init();
        },
        methods:{
            //初始化表格
            init(){
                this.axios.get("jxc/inputInfo/findByPageAndItem",{params:{
                        current:this.currentPage,
                        pageSize:this.pageSize,
                        name:this.supplier,
                        start:this.start,
                        end:this.end,
                    }}).then(
                    r => {
                        this.tableData = r.data.records;
                        this.total = r.data.total
                    }
                )
            },
            //点击表格中的行获取到数据
            handleCurrentChange(val){
                this.infoId = val.id;
            },
            //当前页面发生变化触发事件
            change(currentPage){
                this.currentPage = currentPage;
                this.init();
            },
            //打开采购详情页面
            inputShow(){
                this.axios.get("jxc/inputInfo/findById",{params:{id:this.infoId}}).then(
                   r =>{
                       this.supplierName = r.data.inputInfoBean.name;
                       this.user = r.data.inputInfoBean.person;
                       this.time = r.data.inputInfoBean.time;
                       this.orderData = r.data.inputOrderBeans;
                   }
                );
                this.queryInfo = true;
            }

        }
    }
</script>

<style scoped>

</style>